<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./tubiao/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .box {
            height: auto;
            width: 100%;
            display: flex;
        }

        .left {
            width: 200px;
            /* height: 100%; */
            background-color: gray;


        }

        .left ul {
            width: 100%;
            height: 100%;
            /* text-align: center; */
            line-height: 55px;
            color: rgb(234, 227, 227);
        }

        .left ul li {
            width: 97%;
            margin: 0 auto;
            box-sizing: border-box;
            padding-left: 20px;
        }

        .left ul li.active {
            background-color: rgb(47, 146, 251);
        }

        .left ul li:nth-child(6) {
            background-color: white;
            color: gray;
        }

        .box .right {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: #f5f6fa;
        }

        .box .right .top {
            box-sizing: border-box;
            height: 60px;
            /* background-color: pink; */
            padding: 0 20px;
            position: relative;
            display: flex;
            justify-content: space-between;
            background-color: #ffffff;
        }

        .box .right .top .you {
            box-sizing: border-box;
            padding-top: 20px;
        }

        .box .right .top .you .iconfont {
            font-size: 25px;
            margin-right: 10px;
            color: gray;
        }

        .box .right .top .zuo {
            width: 500px;
        }

        .box .right .top .zuo span {
            display: inline-block;
            margin-top: 20px;
            margin-left: 30px;
        }

        .box .right .top .zuo input {
            margin-left: 30px;
        }

        .box .right .top .zuo .iconfont {
            font-size: 10px;
            position: absolute;
            top: 8px;
            left: 350px;
        }

        .box .right .title {
            box-sizing: border-box;
            height: 80px;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            /* background-color: rebeccapurple; */
        }

        .box .right .title a {
            color: rgb(11, 148, 247);

        }

        .box .right .title span:nth-child(1) {
            font-size: 30px;
            margin-top: 10px;
        }

        .box .right .title span:nth-child(2) {
            margin-top: 20px;
        }

        .box .right .chart {
            width: 100%;
            height: 500px;
            display: flex;
            box-sizing: border-box;
            padding: 0 20px;
            justify-content: space-between;

        }

        .box .right .chart div {
            width: 49%;
            height: 100%;
            background-color: white;
            /* margin-bottom: 10px; */
            /* background-color: orange; */
            box-shadow: 1px 1px 5px -1px gray;
        }

        .box .right table {
            box-sizing: border-box;
            width: 49%;
            box-sizing: border-box;
            text-align: center;
            padding-left: 50px;
            background-color: white;
            margin-top: 20px;
            box-shadow: 1px 1px 5px -1px gray;
            /* padding: 0 20px; */
            line-height: 40px;
        }

        .iconfont {
            font-size: 30px;
        }
        .box .right .tabl{
            padding: 0 20px;
        }
        .box .right .tabl table .iconfont {
            font-size: 20px;
        }

        .right .tabl table tr th:first-child,
        .right .tabl table tr td:first-child {
            text-align: left;
            width: 200px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">
            <ul>
                <li class="logo"><span class="iconfont icon-touxiang"></span> AdminLTE3</li>
                <li class="yonghu"><span class="iconfont icon-touxiang1"></span> Alexander Pierce</li>
                <li class="active"><span class="iconfont icon-gongyezujian-yibiaopan"></span> Dashboard</li>
                <li><span class="iconfont icon-yuanquan"></span> Dashboard v1</li>
                <li><span class="iconfont icon-yuanquan"></span> Dashboard v2</li>
                <li><span class="iconfont icon-yuanquan"></span> Dashboard v3</li>
                <li><span class="iconfont icon-jurassic_table"></span> Widgets</li>
                <li><span class="iconfont icon-B-bingzhuangtu"></span> Charts</li>
                <li><span class="iconfont icon-shu"></span> UI Elements</li>
                <li><span class="iconfont icon-form_search"></span> Forms</li>
                <li><span class="iconfont icon-jurassic_table"></span> Tables</li>
                <li>EXAMPLES</li>
                <li><span class="iconfont icon-calender"></span> Calennder</li>
                <li><span class="iconfont icon-youjian"></span> Mailbox</li>
                <li><span class="iconfont icon-pages"></span> Pages</li>
                <li><span class="iconfont icon-jiahao"></span> Extras</li>
            </ul>
        </div>
        <div class="right">
            <div class="top">
                <div class="zuo">
                    <span>Home</span>
                    <span>Contact</span>
                    <input type="text" placeholder="Search">
                    <span class="iconfont icon-fangdajing"></span>
                </div>
                <div class="you">
                    <span class="iconfont icon-shouye"></span>
                    <span class="iconfont icon-tongzhi"></span>
                    <span class="iconfont icon-shuanglieliebiao"></span>
                </div>
            </div>
            <div class="title">
                <span>Dashboard v3</span>
                <span><a href="">Home</a> / Dashboard v3</span>
            </div>
            <div class="chart">
                <div id="line"></div>
                <div id="column"></div>
            </div>
            <div class="tabl">
                <table>
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Price</th>
                            <th>Sales</th>
                            <th>More</th>
                        </tr>
                    </thead>
                    <tbody>
    
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./text2 mockdata copy.js"></script>
<script>
    let con = document.querySelector('#line')
    let e = echarts.init(con)

    e.setOption({
        title: {
            text: 'Online Store Visitors',
            top: 10,
            left: 20

        },

        // shadowBlur:{
        //     show:true,
        //     shadowColor: 'rgba(0, 0, 0, 0.5)',
        //     shadowBlur: 10
        // },
        legend: { //图例
            top: 25,
            // right:10,
        },
        xAxis: {
            data: ['18th', '20th', '22th', '24th', '26th', '28th', '30th']
        },
        yAxis: {
            type: 'value',
            // min: 0,
            // max: 200,
            // interval: 20,

        },
        series: [
            {
                name: 'This Week',
                type: 'line',
                stack: 'Total',
                smooth: true,
                data: [60, 80, 70, 70, 80, 79, 100]
                //[60, 80, 70, 70, 80, 79, 100]
            },
            {
                name: 'Last Week',
                type: 'line',
                stack: 'Total',
                smooth: true,
                data: [100, 120, 170, 165, 180, 179, 160]
            }
        ]
    });

    let con2 = document.querySelector('#column')
    let e2 = echarts.init(con2)

    e2.setOption({
        legend: {
            top: 25
        },
        xAxis: [
            {
                type: 'category',
                data: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: 'Precipitation',
                min: 0,
                max: 3,
                interval: 1,
                axisLabel: {
                    formatter: '${value} k'
                }
            }
        ],
        series: [
            {
                name: 'This year',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' ml';
                    }
                },
                data: [1, 2, 3, 2.5, 2.7, 2.6, 3]
            },
            {
                name: 'Last year',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' ml';
                    }
                },
                data: [0.7, 1.7, 2.7, 2, 1.8, 1.6, 2]
            }
        ]
    }
    )


    function render(shuju2) {
        let str = shuju2.map((item, index) => {
            return ` 
            <tr>
                <td>${item.name}</td>
                <td>$${item.price} USD</td>
                <td>${item.sales} Sold</td>
                <td><span class="iconfont icon-fangdajing"></span></td>
            </tr>`
        }).join('')
        document.querySelector('tbody').innerHTML = str
    }
    render(shuju2.list)
</script>